<template>
  <div id="codeEditor" class="codeEditor"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { EditorState } from "@codemirror/state"
import { EditorView,keymap } from "@codemirror/view"
import {defaultTabBinding} from "@codemirror/commands"
// import { lineNumbers } from "@codemirror/gutter"
// import { defaultTabBinding,standardKeymap } from "@codemirror/commands"
// import { markdown } from '@codemirror/lang-markdown';
// import { defaultHighlightStyle, classHighlightStyle } from '@codemirror/highlight';
// import { wordmarkTheme } from './codemirror/MyTheme';
// import { oneDark } from '@codemirror/theme-one-dark'
// import { javascriptLanguage } from '@codemirror/lang-javascript';
// import { webkit } from './codemirror/webkit';
import { basicSetup } from '@codemirror/basic-setup';
import useEditorOnchange from '../hooks/useEditorOnchange';

export default defineComponent({
  name: 'MkEitor',
  emits:['change'],
  setup(props,{emit}) {
    let state = EditorState.create({
      doc: '',
      extensions: [
        basicSetup,
        keymap.of([defaultTabBinding])
      ],
    });
    onMounted(()=>{
      let view  = new EditorView({
        state,
        parent: document.querySelector("#codeEditor")!,
      });
      //view.focus();
      view.dispatch({
        changes: {from: 0, insert: "# 欢迎使用！"}
      })
      emit('change',view.state.doc.toString())
      useEditorOnchange(view,()=>{
        console.log("---你输入的内容如下---");
        //console.log(view.state.doc.toString());
        emit('change',view.state.doc.toString())
      }); 
    })
  }
})
</script>
<style>
.codeEditor {
  flex: 1;
}

</style>